<script setup lang="ts">
type ItemType = {
  isPlay: boolean;
  lock: boolean;
  name: string;
};

interface Props {
  list: ItemType[];
  title?: string;
  currentIndex: number; // 当前集数
  show: boolean;
}

const emits = defineEmits<{
  "click-episode": [item: ItemType, index: number];
  close: [];
  clickMask: [];
  "update:show": [show: boolean];
}>();

const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  title: "title",
});

const renderListLen = 50;
const currentTabIndex = ref(0);

const showModel = computed({
  set: (value: boolean) => {
    emits("update:show", value);
  },
  get: () => {
    return props.show;
  },
});

watchEffect(() => {
  currentTabIndex.value = Math.floor(props.currentIndex / renderListLen);
});

const tabList = computed(() => {
  const len = Math.ceil(props.list.length / renderListLen);
  return repeat(len, (index: number) => {
    const start = index * renderListLen + 1;
    const end = Math.min(start + renderListLen - 1, props.list.length);
    return [start, end];
  });
});

const renderList = computed(() => {
  const [start, end] = tabList.value[currentTabIndex.value];
  // 这里必须减1，这里是 start 是从 1 开始的
  return props.list?.slice(start - 1, end) ?? [];
});

function handleClickTabItem(index: number) {
  currentTabIndex.value = index;
}

function onClickItem(item: ItemType, index: number) {
  const i = index + currentTabIndex.value * renderListLen;
  emits("click-episode", item, i);
}

const handleClose = () => {
  emits("close");
  showModel.value = false;
};

const clickWrapper = () => {
  showModel.value = false;
  emits("clickMask");
};
</script>

<template>
  <van-overlay :show="showModel" class="ep-wrapper" @click="clickWrapper">
    <div class="content" @click.stop>
      <div class="header">
        <div class="header__title">{{ title }}</div>
        <div class="header__sub-title">Completed({{ list.length }})</div>
        <div class="header__close">
          <van-icon name="cross" color="#989898" @click="handleClose" />
        </div>
      </div>
      <div class="tab" v-if="tabList && tabList.length > 1">
        <div
          v-for="([start, end], index) in tabList"
          :key="start"
          class="tab__item"
          :class="[
            {
              'tab__item--active': currentTabIndex === index,
            },
          ]"
          @click="handleClickTabItem(index)"
        >
          {{ start }}-{{ end }}
        </div>
      </div>
      <div class="list">
        <div class="list-inner">
          <div
            class="item"
            v-for="(item, index) in renderList"
            :key="index"
            @click="onClickItem(item, index)"
          >
            {{ item?.name ?? index + 1 }}
            <div class="item__lock" v-if="item.lock">
              <van-icon name="lock" size="10" />
            </div>
            <div
              class="item-play"
              v-if="index + currentTabIndex * renderListLen === currentIndex"
            >
              <span
                class="item-play__item"
                v-for="item in 5"
                :key="item"
                :style="{
                  'animation-delay': `${0.35 * (item - 1)}s`,
                }"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<style scoped lang="scss">
.ep-wrapper {
  display: flex;
  align-items: flex-end;
  z-index: 199;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 15px;
    height: 353px;
    background: rgba(36, 36, 36, 1);
    box-sizing: border-box;
  }
}

.header {
  display: flex;
  //align-items: center;

  &__title {
    font-weight: 600;
    font-size: 21px;
    color: #ffffff;
    line-height: 30px;
    text-align: left;
    font-style: normal;
    margin-right: 10px;
  }

  &__sub-title {
    flex: 1;
    font-size: 15px;
    color: #989898;
    line-height: 32px;
    text-align: left;
    font-style: normal;
  }

  &__close {
    padding-top: 7px;
  }
}

.tab {
  display: flex;
  align-items: center;
  border-bottom: 1px rgba(151, 151, 151, 1) solid;
  padding: 15px 0;

  font-weight: 600;
  font-size: 15px;
  color: #989898;
  line-height: 21px;
  text-align: left;
  font-style: normal;

  &__item {
    margin-right: 30px;

    &--active {
      position: relative;
      color: rgba(255, 59, 139, 1);

      &::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(255, 59, 139, 1);
      }
    }
  }
}

.list {
  padding: 20px 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;

  &::-webkit-scrollbar {
    display: none;
  }

  .list-inner {
    $ml: 5px;
    display: flex;
    flex-wrap: wrap;
    margin-left: $ml * -1;

    .item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 65px;
      height: 50px;
      margin-left: $ml;
      margin-bottom: $ml;
      background: #494949;
      border-radius: 5px;
      font-weight: 600;
      font-size: 14px;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      box-sizing: border-box;
      overflow: hidden;

      &:active {
        background: linear-gradient(
          rgba(255, 255, 255, 0.2),
          rgba(255, 255, 255, 0)
        );
      }

      .item-play {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        left: 1px;
        background: #000000;
        border-radius: 5px;
        z-index: 2;

        &__item {
          /* 随便来点样式 */
          height: 15px;
          width: 5px;
          background: red;
          margin-right: 3px;
          animation: heart 0.35s ease-in-out infinite alternate;
        }

        @keyframes heart {
          from {
            height: 15px;
          }
          to {
            height: 5px;
          }
        }
      }

      .item__lock {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 22px;
        height: 16px;
        background: #ff3b8b;
        border-radius: 0 5px 0 5px;
        z-index: 3;
      }
    }
  }
}
</style>
